
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>业主管理</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <!--    <script src="js/axios-interceptor.js"></script>-->
    <link rel="stylesheet" href="../css/index.css"/>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: "Helvetica Neue", Arial, sans-serif;
            background: #f4f6f9;
        }

        .search-container {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: center;
        }

        .search-container .el-form-item {
            margin: 0;
        }

        .table-container {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .pagination-container {
            margin-top: 15px;
            display: flex;
            justify-content: flex-end;
        }

        .table-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            align-items: center;
        }

        .batch-delete-btn {
            margin-left: 10px;
        }
        .table-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 220px); /* 动态计算高度（原样式中已有padding/margin，这里需要加大减去的值） */
            min-height: 300px; /* 最小高度保障 */
        }
        .el-table {
            flex: 1;
            overflow: auto;
            margin-bottom: 10px; /* 与分页控件的间距 */
        }
        .el-table__body-wrapper {
            scrollbar-width: thin; /* 更细的滚动条（Firefox） */
        }
        /* 滚动条样式（可选） */
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    </style>

</head>
<body>
<div id="app">
    <!-- 表格 -->
    <div class="table-container">
        <!-- 表格顶部操作按钮 -->
        <div class="table-header">
            <div>
                <el-button type="success" @click="handleAdd">新增业主</el-button>
                <el-button type="danger" @click="handleBatchDelete" >批量删除</el-button>
            </div>
        </div>

        <el-table
                :data="filterTableData"
                border
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
                <template #header>
                    <div class="name-search">
                        <span>姓名</span>
                        <el-input
                                v-model="search"
                                placeholder="搜索名称"
                                size="small"
                                @input="getAllOwner">
                        </el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="telephone" label="电话" width="150"></el-table-column>
            <el-table-column prop="gender" label="性别" width="80">
                <template #default="scope">
                   <el-tag v-if="scope.row.gender==1" class="ml-2" type="primary">男</el-tag>
                    <el-tag v-else class="ml-2" type="danger">女</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="idCard" label="身份证号" width="180"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :page-sizes="[5, 10, 20, 50]"
                    v-model:page-size="pageSize"
                    v-model:current-page="currentPage"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"></el-pagination>
        </div>
        </div>
    <el-dialog v-model="dialogVisible" :title="form.id ? '编辑业主' : '新增业主'" width="50%">
        <el-form :model="form" :rules="rules" ref="ownerFormRef" label-width="100px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入业主姓名"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="form.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="联系电话" prop="telephone">
                <el-input v-model="form.telephone" placeholder="请输入联系电话"></el-input>
            </el-form-item>

            <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="form.idCard" placeholder="请输入身份证号"></el-input>
            </el-form-item>

            <el-form-item label="所属房间" prop="houseId">
                <el-select
                        v-model="form.houseId"
                        placeholder="请选择所属房间"
                        style="width: 100%">
                    <el-option
                            v-for="h in house"
                            :label="h.houseNo"
                            :value="h.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="备注">
                <el-input
                        v-model="form.remark"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入备注信息"></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addNewOwner">保存</el-button>
        </template>
    </el-dialog>
</div>
<script>
    const {createApp, ref, reactive, computed,onMounted, onUpdated} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    const app = createApp({

        setup() {
            // 原始数据
            const search = ref("")

            const tableData = ref([]);
            const total = ref(0);
            const pageSize = ref(5);
            const currentPage = ref(1);

            const dialogVisible = ref(false)
            // 表单数据
            const form = ref({});

            const ownerFormRef = ref(null);
            const rules = ref({
                name: [
                    {required: true, message: '房东名称不能为空', trigger: 'blur'},
                ],
                telephone: [
                    {required: true, message: '手机号不能为空', trigger: 'blur'},
                    {pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/, message: '您的手机号非法', trigger: 'blur'},
                ],
                gender: [
                    {required: true, message: '性别不能为空', trigger: 'blur'},
                ],
                idCard: [
                    {required: true, message: '身份证不能为空', trigger: 'blur'},
                    {pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/, message: '身份证不能为空', trigger: 'blur'}
                ],
            })

            const getAllOwner = () => {
                axios.get('/owner')
                    .then(resp => {
                        tableData.value = resp.data.data;
                    })

            };
            const filterTableData = computed(() => {
                let ownerData =  tableData.value.filter((item) => {
                    return !search.value || item.name.includes(search.value);
                    })
                //前端分页，自己维护total
                total.value = ownerData.length
                let start = (currentPage.value-1)*pageSize.value
                let end = pageSize.value
                return  ownerData.splice(start,end)
            })

            const house = ref([])
            // 处理新增
            const handleAdd = () => {
                axios.get("/house/getHouseNoAnId").then(resp => {
                    house.value = resp.data.data
                    dialogVisible.value = true
                })
            };

            const addNewOwner = () => {
                if (form.value.id) {
                    //修改
                }else {
                    //新增
                    axios.post("/owner/addNewOwner", form.value).then(resp => {
                            refreshData(resp.data.msg);
                    }).catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
                }
            }

            const refreshData = (msg)=>{
                ElMessage.success(msg);
                form.value = {}
                dialogVisible.value = false
                getAllOwner()
            };

            // 处理批量删除
            const handleBatchDelete = () => {
                ElMessageBox.confirm(`确定要删除选中的 ${multipleSelection.value.length} 条数据吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ElMessage.success('删除成功');
                    multipleSelection.value = [];
                }).catch(() => {
                    ElMessage.info('已取消删除');
                });
            };

            // 处理编辑
            const handleEdit = (row) => {
                ElMessageBox.prompt('请输入新的业主姓名', '编辑业主', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: row.name
                }).then(({ value }) => {
                    row.name = value;
                    ElMessage.success('修改成功');
                }).catch(() => {
                    ElMessage.info('取消编辑');
                });
            };

            // 处理删除
            const handleDelete = (row) => {
                ElMessageBox.confirm(`确定要删除业主 ${row.name} 吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ElMessage.success('删除成功');
                }).catch(() => {
                    ElMessage.info('已取消删除');
                });
            };

            // 处理分页大小变化
            const handleSizeChange = (val) => {
                pageSize.value = val;
                getAllOwner();
            };

            const handlePageChange = (val) => {
                currentPage.value = val;
                getAllOwner();
            };
            const handleSelectionChange = (val) => {

            };
            // 初始化数据
            onMounted(() => {
                console.log("已挂载");
                getAllOwner();
            });

            return {
                search,getAllOwner,filterTableData,
                tableData,form,dialogVisible,
                total,rules,ownerFormRef,
                pageSize,
                currentPage,addNewOwner,
                handleAdd,house,
                handleBatchDelete,
                handleEdit,
                handleDelete,
                handleSizeChange,
                handlePageChange,
                handleSelectionChange
            };
        }

        });
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 注册 Element Plus 图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app");
</script>

</body>
</html>